/*
1.1版本缺陷：
1.无封装性
2.重复性代码较多，每增加一个字段都要增加相应的函数
3.无可移植操作
*/

function ValiForm() {
    const self = this
    //表单字段验证结果
    this.valiRes = {
        username: false,
        email: false,
        pwd1: false,
        pwd2: false
    }
    //表单输入框
    this.iptEle = {
        username: document.getElementById('username'),
        email: document.getElementById('email'),
        pwd1: document.getElementById('pwd1'),
        pwd2: document.getElementById('pwd2')
    }
    this.regRules = {
        username: /^[A-Za-z]\w{2,}/,
        email: /^[A-Za-z0-9]\w+@\w{2,}\.[a-zA-Z]{2,4}/,
        pwd1: /\w{6,20}/,
        pwd2: /\w{6,20}/
    }
    this.fieldTip = {
        username: {
            error: '哈哈，用户名都搞不对哦',
            success: '用户名格式终于填对了'
        },
        email: {
            error: '你娃邮箱都搞不对',
            success: ''
        },
        pwd1: {
            error: '能不能来一个复杂一点的，想被盗号吗',
            success: 'ok,very good'
        },
        pwd2: {
            error: '能不能来一个复杂一点的，想被盗号吗',
            success: 'ok,very good'
        },
    }
    //字段
    this.fields = ['username', 'email', 'pwd1', 'pwd2']
    this.submit = document.getElementById('submit')
    //字段验证函数
    this.valiField = function (field) {
        const value = this.iptEle[field].value
        const fieldRegRule = this.regRules[field]
        this.valiRes[field] = fieldRegRule.test(value)
        console.log(`${field}字段验证结果为：${this.valiRes[field]}`)
        this.hanldeFieldTip(field)
    }
    //处理字段验证提示信息
    this.hanldeFieldTip = function (field) {
        const helpEle = this.iptEle[field].nextElementSibling
        const formGroupEle = this.iptEle[field].parentElement
        const tip = this.valiRes[field] ? this.fieldTip[field].success : this.fieldTip[field].error
        helpEle.innerText = tip
        if (this.valiRes[field]) {
            //如果验证正确
            formGroupEle.classList.add('success')
            formGroupEle.classList.remove('error')
        } else {
            formGroupEle.classList.remove('success')
            formGroupEle.classList.add('error')
        }

    }

    //绑定事件
    this.bindEvent = function () {
        // const context = this
        // const ctx = this
        // const _this = this
        console.log('看看上面的this')
        //给所有字段对应的输入框绑定onchange事件
        for (let field in this.iptEle) {
            const curIpt = this.iptEle[field]
            curIpt.onchange = function () {
                self.valiField(field)
                // console.log(this)
                // console.log(self)
            }
        }
        // this.submit.onclick = this.handleSubmit
        //绑定this.handleSubmit调用的时候的this值
        this.submit.onclick = this.handleSubmit.bind(this)
    }
    //验证表单，需要每一字段都验证通过
    this.valiForm = function () {
        for (key in this.valiRes) {
            if (!this.valiRes[key]) {
                return false
            }
        }
        return true
    }
    //根据传入的字段聚焦到该字段对应的输入框，并且调用验证该字段的函数
    this.focusField = function (field) {
        this.iptEle[field].focus()
        this.valiField(field)
    }
    //聚焦到第一个验证失败的字段对应的输入框，然后返回第一个失败的字段
    this.focusErrorField = function () {
        for (let field of this.fields) {
            if (!this.valiRes[field]) {
                this.focusField(field)
                return field
            }
        }
    }
    //处理表单的提交
    this.handleSubmit = function (e) {
        //如果表单验证不通过
        if (!this.valiForm()) {
            //阻止表单提交
            e.preventDefault();
            //聚焦我的第一个未通过字段
            this.focusErrorField()
        }
    }

    //绑定事件
    this.bindEvent()

}
const vf = new ValiForm()